<template>
  <div>
    <div class="header">
      <el-row>
        <el-col :span="6">【题型】：{{ scopeObjEsay.questionType }}题</el-col>
        <el-col :span="6">【编号】：{{ scopeObj.id }}</el-col>
        <el-col :span="6">【难度】：{{ scopeObjEsay.difficulty }}</el-col>
        <el-col :span="6">【标签】：{{ scopeObj.tags }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">【学科】：{{ scopeObjEsay.subject }}</el-col>
        <el-col :span="6">【目录】：{{ scopeObjEsay.catalog }}</el-col>
        <el-col :span="6">【方向】：{{ scopeObjEsay.direction }}</el-col>
        <el-col :span="6"></el-col>
      </el-row>
    </div>
    <div class="bodys">
      <el-row class="question">【题干】：</el-row>
      <el-row>
        <div v-html="scopeObj.question" style="color:'blue'"></div>
      </el-row>
      <el-row v-if="isType !== '3'"
        >{{ scopeObjEsay.questionType }}题
        选项：（以下选中的选项为正确答案）</el-row
      >
      <!-- 单选 -->
      <el-row v-if="isType === '1'">
        <el-radio-group v-model="danxuan">
          <el-radio
            v-for="item in scopeObj.options"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-radio>
        </el-radio-group>
      </el-row>
      <!-- 多选 -->
      <el-row v-else-if="isType === '2'">
        <el-checkbox-group v-model="duoxuan">
          <el-checkbox
            v-for="item in scopeObj.options"
            :key="item.id"
            :label="item.title"
          ></el-checkbox>
        </el-checkbox-group>
      </el-row>
    </div>
    <div class="videos">
      <el-row
        >【参考答案】：
        <el-button type="danger" size="small" @click="ONvideo"
          >视频答案预览</el-button
        >
      </el-row>
      <el-row>
        <video
          :src="scopeObj.videoURL"
          class="videoUrl"
          v-if="videoShow"
          controls
        ></video>
      </el-row>
    </div>
    <div class="answer">
      <el-row
        >【答案解析】：
        <div v-html="scopeObj.answer"></div
      ></el-row>
    </div>
    <div class="mark">
      <el-row>【题目备注】：{{ scopeObj.remarks }}</el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 控制视频的显示
      videoShow: false,
      // 单选绑定的v-model
      danxuan: "",
      // 多选绑定的v-model
      duoxuan: [],
      // 用来判定是甚么类型的题
      isType: ""
    };
  },
  props: {
    // 试题信息
    scopeObj: {
      type: Object,
      required: true
    },
    // 简单试题信息
    scopeObjEsay: {
      type: Object,
      required: true
    }
  },
  created() {
    this.isOption();
  },
  mounted() {},
  methods: {
    // 控制视频的显示与隐藏
    ONvideo() {
      this.videoShow = !this.videoShow;
    },
    // 控制单选框是否默认选中
    isOption() {
      // 判断是单选还是多选
      this.isType = this.scopeObj.questionType;

      this.scopeObj.options.forEach(item => {
        if (item.isRight === 1) {
          this.danxuan = item.title;
          this.duoxuan.push(item.title);
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.header {
  border-bottom: 1px solid black;
  .el-row {
    margin-bottom: 20px;
  }
}
.bodys {
  border-bottom: 1px solid black;
  .el-radio {
    display: block !important;
    margin: 5px 0;
  }
  .el-checkbox {
    display: block !important;
    margin: 5px 0;
  }
  .el-row {
    margin: 10px 0;
  }
}
.videos {
  border-bottom: 1px solid black;
  .el-row {
    margin: 10px 0;
    .videoUrl {
      width: 500px;
      height: 300px;
    }
  }
}
.answer {
  border-bottom: 1px solid black;
  .el-row {
    margin: 15px 0;
  }
}
.mark {
  .el-row {
    margin: 10px 0;
  }
}
</style>
